<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: blue">Header</el-header>
      <el-container>
        <el-aside
          width="200px"
          style="height: calc(100vh - 60px); background: red"
          >Aside</el-aside
        >
        <el-main>
          <el-row :gutter="20">
            <el-col :span="14"
              ><div class="grid-content bg-purple" id="box2"
            /></el-col>
            <el-col :span="5"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="5"><div class="grid-content bg-purple" /></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <div class="grid-content bg-purple" id="box1"></div>
            </el-col>
            <el-col :span="7"><div class="grid-content bg-purple" /></el-col>
            <el-col :span="10"><div class="grid-content bg-purple" /></el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import product from "./mock/products";

export default {
  setup() {
    onMounted(() => {
      const box1 = document.getElementById("box1");
      if (box1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(box1);
        // 绘制图表
        myChart.setOption({
          title: {
            text: "周访问数",
          },
          legend: {
            right: "1%",
            top: "center",
            orient: "vertical",
            itemGap: 10,
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [20, 80],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [
                { value: 40, name: "周1" },
                { value: 38, name: "周2" },
                { value: 32, name: "周3" },
                { value: 30, name: "周4" },
                { value: 28, name: "周5" },
                { value: 26, name: "周6" },
                { value: 22, name: "周7" },
              ],
            },
          ],
        });
      }
    });

    onMounted(() => {
      // data: [
      //   {
      //     year: 2015,
      //     data: [120, 132, 101, 134],
      //     name: "Email",
      //   },
      //   {
      //     year: 2016,
      //     data: [120, 132, 101, 134],
      //     name: "Email",
      //   },
      //   {
      //     year: 2015,
      //     data: [120, 132, 101, 134],
      //     name: "Email",
      //   },
      //   {
      //     year: 2015,
      //     data: [120, 132, 101, 134],
      //     name: "Email",
      //   },
      // ];

      const box2 = document.getElementById("box2");
      if (box2) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(box2);
        // 绘制图表
        myChart.setOption({
          title: {
            text: "年访问数",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["2015", "2016", "2017", "2018"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "Email",
              type: "line",
              smooth: true,
              data: [120, 132, 101, 134],
            },
            {
              name: "Union Ads",
              type: "line",
              smooth: true,
              data: [220, 182, 191, 234],
            },
            {
              name: "Video Ads",
              type: "line",
              smooth: true,
              data: [150, 232, 201, 154],
            },
            {
              name: "Direct",
              type: "line",
              smooth: true,
              data: [320, 332, 301, 334],
            },
            {
              name: "Search Engine",
              type: "line",
              smooth: true,
              data: [820, 932, 901, 934],
            },
          ],
        });
      }
    });

    onMounted(async () => {
      const res = await product.getData({
        page: 2,
        size: 10,
      });
      console.log(res);
    });
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  height: 240px;
  background: #fff;
}
</style>
